
<template>
  <div>登录页</div>
  <el-form ref="ruleFormRef" :model="loginData" :rules="rules" status-icon label-width="120px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="adminname">
      <el-input v-model="loginData.adminname" autocomplete="off" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="loginData.password" autocomplete="off" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="loginCheck(ruleFormRef)">登录</el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts" setup>
import type { FormInstance,FormRules } from "element-plus";
import {ref,reactive} from "vue";
import type {Ref} from "vue";
import type {IPerson} from "@/myTypes"
import {loginCheckApi} from "@/api/person"
import { useRouter } from "vue-router";

const $router = useRouter();

const ruleFormRef = ref<FormInstance>()

const loginData = reactive<IPerson>({
   adminname:"admin",
   password:"123456"
})

// 表单验证
const rules = reactive<FormRules>({
    adminname: [
        { required: true, message: 'Please input 用户名', trigger: 'blur' },
    ],
    password: [
        {  required: true, message: 'Please input 密码', trigger: 'blur' }],
})

const loginCheck=(form:FormInstance | undefined)=>{
  if (!form) return;

  form.validate((valid) => {
        if (valid) {
          loginCheckApi(loginData)
          .then((res:any)=>{
            if(res.data.code==="200"){
              // 登录成功！
              // 1、存储用户名
              sessionStorage.setItem("adminname",loginData.adminname)
              // 2、存储token
              sessionStorage.setItem("token",res.data.data.token);
              
              // 3、把权限数据需要存储
              sessionStorage.setItem("checkedkeys", JSON.stringify(res.data.data.checkedkeys));

              // 4、跳转
              $router.push("/Admin");

            }
          })

        } else {
            console.log('error submit!')
            return false
        }
    })
 

}

// if($router.getRoutes().length>3){
//   window.location.reload();
//   alert("reload了");
// }


</script>

<style></style>